import React from "react";
import Login from "./login/login";
import logo from "./logo.svg";
import "./App.css";
import { Route, HashRouter, Redirect, Switch } from "react-router-dom";
import NoAuthority from "./common/component/error/no_authority"; //TODO: 使用@common   (配置webpack)
import MenuComponent from "./common/utils/menus";
import { Button } from "antd";
import * as public_action from "./actions/public";
import { connect } from "react-redux";

//index 页面
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      // isLogin: false, // 登录状态(默认未登录)
      pageFlag: 0, // 页面标识
    };
  }

  componentDidMount() {
    let dispatch = this.props.dispatch;
    // do nothing
    // let isLogin = this.getLogin();
    // this.setState({ isLogin: isLogin });
  }

  //获取登录状态
  // getLogin = () => {
  //   const { isLogin } = this.props.publicState;
  //   return isLogin;
  //   // return sessionStorage.getItem("isLogin") === "true";
  // };

  reqLogin = () => {
    let dispatch = this.props.dispatch;
    console.log("dispatch:", dispatch);
    dispatch(public_action.login());
    // this.setState({ isLogin: true });
    // sessionStorage.setItem("isLogin", "true"); //临时保存登录状态，为了便于测试，使用sessionStorage,每一次关闭页面都要重新登录
  };

  onLogout = () => {
    let dispatch = this.props.dispatch;
    dispatch(public_action.logout());
    // this.setState({ isLogin: false });
  };

  //切换页面
  onSwitchClick = () => {
    let { pageFlag } = this.state;
    pageFlag++;
    this.setState({ pageFlag });
    if (pageFlag % 2 === 0) {
      window.location.hash = "#/welcome";
    } else {
      window.location.hash = "#/user";
    }
  };

  render() {
    const { pageFlag } = this.state;
    const { isLogin } = this.props.publicState;
    let permissions = pageFlag % 2 === 0 ? ["welcome", "user"] : ["welcome"]; //权限列表模拟切换
    const menuList = []; //拓展
    const RouteWithSubRoutes = (route) => (
      <Route
        path={route.path}
        render={(props) => <route.component {...props} routes={route.routes} />}
      />
    );
    return (
      <HashRouter>
        <div className="App">
          <header className="App-header">
            {<img src={logo} className="App-logo" alt="logo" />}
            {!isLogin && <Login reqLogin={this.reqLogin} />}
            <Button onClick={this.onSwitchClick}>切换</Button>
            {isLogin && (
              <Switch>
                <Route
                  exact
                  path="/"
                  render={() => {
                    if (menuList[0]) {
                      let url =
                        menuList[0].route ||
                        menuList[0].children[0].route ||
                        menuList[0].children[0].children[0].route;
                      return <Redirect to={url} />;
                    }
                    return null;
                  }}
                />
                {MenuComponent.filter((route) => {
                  return (
                    route.authority === undefined ||
                    permissions.includes(route.authority)
                  );
                }).map((route, index) => {
                  return (
                    <RouteWithSubRoutes exact key={route.path} {...route} />
                  );
                })}
                <Route render={(props) => <NoAuthority />} />
              </Switch>
            )}
          </header>
        </div>
      </HashRouter>
    );
  }
}

// export default App;
export default connect((state) => {
  return {
    publicState: state.publicState,
  };
})(App);

/**
 * 1. 部署到Linux
 * 2. Node服务端做请求路由分割(30分钟)
 * 3. 客户端做一个模拟登陆的页面效果(30分钟)
 * 4. 做一个非对称加密的登陆验证(30分钟)
 * 5. 做一下Session过期超时的机制(30分钟)
 * 附加题:
 * 6. 思考如何实现Node的异步接口。
 * 7. 前端打包时, 将static变成index.html的相对路径
 * 8. Server端监听的地址和端口应配置到配置文件中
 */
